<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/weui.min.css" />
  </head>
  <style>
    .navbar {
      padding: 0 10px;
      height: 44px;
      line-height: 44px;
    }
    .placeholder {
      text-align: center;
    }
    .button {
      margin: 10px;
    }
    .weui-btn {
      width: 100%;
    }
  </style>
  <body data-weui-theme="light">
    <div class="weui-flex navbar">
      <div class="weui-flex__item"><div class="placeholder">添加</div></div>
      <div><div class="placeholder">退出</div></div>
    </div>
    <div class="container">
      <div class="weui-tab">
        <div class="weui-navbar">
          <div
            role="tab"
            aria-selected="true"
            aria-controls="panel1"
            id="tab1"
            class="weui-navbar__item"
          >
            列表
          </div>
          <div
            role="tab"
            aria-controls="panel2"
            id="tab2"
            class="weui-navbar__item weui-bar__item_on"
          >
            添加
          </div>
        </div>
        <div
          style="display: none"
          role="tabpanel"
          id="panel1"
          aria-labelledby="tab1"
          class="weui-tab__panel"
        ></div>
        <div
          role="tabpanel"
          id="panel2"
          aria-labelledby="tab2"
          class="weui-tab__panel"
        >
          <div class="container-form">
            <form action="">
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <span class="weui-label">名字:</span>
                </div>
                <div class="weui-cell__bd weui-flex">
                  <input
                    id="js_input1"
                    class="weui-input"
                    type="text"
                    placeholder="请输入名字"
                  />
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">地区</label>
                </div>
                <div class="weui-cell__bd">
                  <select class="weui-select" name="select2" id="select2">
                    <option value="1">中国</option>
                    <option value="2">美国</option>
                    <option value="3">英国</option>
                  </select>
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <span class="weui-label">地址:</span>
                </div>
                <div class="weui-cell__bd weui-flex">
                  <input
                    id="js_input2"
                    class="weui-input"
                    type="text"
                    placeholder="请输入地址"
                  />
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <span class="weui-label">店名:</span>
                </div>
                <div class="weui-cell__bd weui-flex">
                  <input
                    id="js_input2"
                    class="weui-input"
                    type="text"
                    placeholder="请输入店名"
                  />
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <span class="weui-label">产品图片:</span>
                </div>
                <div class="weui-cell__bd weui-flex">
                  <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                    <div class="weui-uploader__input-box">
                      <input
                        id="uploaderInput"
                        class="weui-uploader__input"
                        type="file"
                        accept="image/*"
                        multiple
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <span class="weui-label">店家图片:</span>
                </div>
                <div class="weui-cell__bd weui-flex">
                  <div class="weui-uploader__bd">
                    <ul
                      class="weui-uploader__files"
                      id="uploaderStoreFiles"
                    ></ul>
                    <div class="weui-uploader__input-box">
                      <input
                        id="uploaderStoreInput"
                        class="weui-uploader__input"
                        type="file"
                        accept="image/*"
                        multiple
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">业务员</label>
                </div>
                <div class="weui-cell__bd">
                  <select class="weui-select" name="select2" id="select2">
                    <option value="1">业务员1</option>
                    <option value="2">业务员2</option>
                    <option value="3">业务员3</option>
                  </select>
                </div>
              </div>

              <div class="button">
                <button
                  id="loginBtn"
                  role="button"
                  class="weui-btn weui-btn_primary"
                  type="submit"
                >
                  保存
                </button>
              </div>
            </form>
          </div>
          <div
            role="dialog"
            aria-hidden="true"
            aria-modal="true"
            class="weui-gallery"
            id="gallery"
          >
            <span
              role="img"
              tabindex="0"
              class="weui-gallery__img"
              id="galleryImg"
            ></span>
            <div class="weui-gallery__opr">
              <a
                role="button"
                aria-label="删除"
                href="javascript:"
                class="weui-gallery__del"
              >
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/weui.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $("#tab1").on("click", function () {
          window.location.href = "./index.html";
        });
        uploaderImg("uploaderInput", "uploaderFiles");

        uploaderImg("uploaderStoreInput", "uploaderStoreFiles");
      });

      function uploaderImg(uploaderInput, uploaderFiles) {
        var tmpl =
          '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
        var $uploaderInput = $(`#${uploaderInput}`); //上传按钮+
        var $uploaderFiles = $(`#${uploaderFiles}`); //图片列表
        var $galleryImg = $(".weui-gallery__img"); //相册图片地址
        var $gallery = $(".weui-gallery");

        $uploaderInput.on("change", function (e) {
          var src,
            url = window.URL || window.webkitURL || window.mozURL,
            files = e.target.files;

          for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];

            if (url) {
              src = url.createObjectURL(file);
            } else {
              src = e.target.result;
            }
            $uploaderFiles.append($(tmpl.replace("#url#", src)));
          }
        });
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
          index = $(this).index();
          $galleryImg.attr("style", this.getAttribute("style"));
          console.log(this);
          $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
          $gallery.fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function () {
          $uploaderFiles.find("li").eq(index).remove();
        });
      }
    </script>
  </body>
</html>
